<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/drilldown.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/no-data-to-display.js"></script>
<body class="white-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="category-form">
                <div class="select-list">
                    <ul>
                        <li>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">种类：</label>
                                <div class="col-sm-8">
                                    <select id="sumByCategory">
                                        <option value="1">理发师</option>
                                        <option value="2">所有服务项目</option>
                                        <option value="3">所有服务类型</option>
                                    </select>
                                </div>

                            </div>

                        </li>
                        <li>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">创建时间：</label>
                                <div class="col-sm-8">
                                    <input id="Screatetime" name="ScreateTime" placeholder="输入开始时间"
                                           class="form-control" type="text">至<input id="Fcreatetime" name="FcreateTime"
                                                                                    placeholder="输入结束时间"
                                                                                    class="form-control" type="text">
                                </div>
                            </div>
                        </li>

                        <li><a class="btn btn-primary btn-rounded btn-sm"
                               id="search"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm"
                               onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>

                </div>
            </form>
        </div>
        <div class="btn-group-sm hidden-xs" id="toolbar" role="group">


        </div>

        <div class="col-sm-12 select-table table-striped">
            <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">

            </div>
        </div>
    </div>
</div>


<div th:include="include :: footer"></div>
<script th:inline="javascript">

    /* 分界线 */

    $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });
    $("#Screatetime").datetimepicker({//选择年月日
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,//显示‘今日’按钮
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。

        clearBtn: false,//清除按钮

        forceParse: 0
    });
    $("#Fcreatetime").datetimepicker({//选择年月日
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,//显示‘今日’按钮
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。

        clearBtn: false,//清除按钮

        forceParse: 0
    });

    /* 分界线 */
    var prefix = "/order";
    var chart = null;
    $(function () {
        chart = Highcharts.chart('container', {
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                type: 'category',
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: '销售额（元）'
                }
            },
            lang: {
                noData: '暂无数据'
            },
            tooltip: {
                // head + 每个 point + footer 拼接成完整的 table
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y:.2f}元</b> <br/>'
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.2f}元'
                    }
                },
                showInLegend: true
            },
            credits: {
                enabled: false
            },
            series: [{}],

            lang: {
                noData: "此时间段无数据"

            },
            noData: {},
        });


    });
    getBarberData();
    $("#sumByCategory").change(function () {
        var choice = $("#sumByCategory option:selected").val();
        if (choice == 1) {
            getBarberData();
        }
        if (choice == 2) {
            getServiceData()

        }
        if (choice == 3) {
            getTosData()

        }
    })

    function getBarberData() {
        $.getJSON('/order/sumByBarber', function (data) {
            console.log(data);
            var t = [];
            //将数据组装成[{,,,}]的形式才能被hcharts识别
            for (var i = 0; i < data.length; i++) {
                var v = {};
                v.y = data[i].total;
                v.name = data[i].bname;
                t.push(v)
            }
            chart.update({
                chart: {
                    line: false,
                    column: true,
                },
                title: {
                    text: '理发师销售额'
                },
                subtitle: {
                    text: '所有历史记录'
                },
                series: [{
                    name: "理发师销售记录",
                    type: 'column',
                    colorByPoint: true,
                    data: t,
                }]
            });

        })
    };

    //按服务项目查询
    function getServiceData() {
        $.getJSON('/order/sumByService', function (data) {
            var t = [];
            //将数据组装成[{,,,}]的形式才能被hcharts识别
            for (var i = 0; i < data.length; i++) {
                var v = {};
                v.y = data[i].total;
                v.name = data[i].category;
                v.showInLegend = true;
                t.push(v)
            }
            chart.update({
                chart: {
                    line: false,
                    column: true,
                },
                title: {
                    text: '服务项目销售额'
                },
                subtitle: {
                    text: '所有历史记录'
                },
                series: [{
                    name: "服务项目销售记录",
                    type: 'column',
                    colorByPoint: true,
                    data: t,

                }]
            });

        })

    }

    //
    function getTosData() {
        $.getJSON('/order/sumByTos', function (data) {
            var t = [];
            //将数据组装成[{,,,}]的形式才能被hcharts识别
            for (var i = 0; i < data.length; i++) {
                var v = {};
                v.y = data[i].total;
                v.name = data[i].category;

                t.push(v)
            }
            chart.update({
                chart: {
                    line: false,
                    column: false,
                },
                title: {
                    text: '服务类型销售额'
                },
                subtitle: {
                    text: '所有历史记录'
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '<span style="color:{point.color}">{point.name}:{point.y:.2f}元'
                        },
                        showInLegend: true
                    }
                },

                series: [{
                    name: "服务类型销售额",
                    type: 'pie',
                    colorByPoint: true,
                    data: t,
                }]
            })


        })

    }

    $("#search").click(function () {

        var choice = $("#sumByCategory option:selected").val();
        var startTime = $("#Screatetime").val();
        var endTime = $("#Fcreatetime").val();
        if (startTime == '' && endTime == '') {
            $.modal.alertWarning("日期区间不能为空！")
            return;
        }
        if (startTime != '' && endTime != '') {
            var start = new Date(startTime.replace("-", "/").replace("-", "/"));
            var end = new Date(endTime.replace("-", "/").replace("-", "/"));
            if (end < start) {

                $('#Screatetime').val("");
                $('#Fcreatetime').val("");
                $.modal.alertWarning("开始时间不能小于截止时间时间！")
                return;
            }

        }


        if (choice == 1) {
            $.ajax({
                url: "/order/sumByBarber",
                type: "post",
                data: $("#category-form").serialize(),
                success: function (data) {
                    console.log(data.length);

                    //如果没有数据
                    if (data.length == 0) {

                        chart.update({
                            title: {
                                text: ''
                            },
                            subtitle: {
                                text: ''
                            },
                            series: {
                                data: data,

                            },
                            noData: {
                                style: {
                                    fontWeight: 'bold',
                                    fontSize: '20px',
                                    color: '#303030'
                                }
                            },

                        });
                        return;
                    }
                    var t = [];
                    var star = data[0].ScreateTime;
                    var end = data[0].FcreateTime;
                    if (star != "" && star != null)
                        star += "—";
                    if (star == null) {
                        star = "";
                        end = end + "以前"
                    }
                    if (end == null) {
                        star += "今天"
                        end = "";
                    }



                    //将数据组装成[{,,,}]的形式才能被hcharts识别
                    for (var i = 0; i < data.length; i++) {
                        var v = {};
                        v.y = data[i].total;
                        v.name = data[i].bname;
                        t.push(v)
                    }
                    chart.update({
                        chart: {
                            line: false,
                            column: true,
                        },
                        title: {
                            text: '理发师销售额'
                        },
                        subtitle: {
                            text: star + end + '的数据'
                        },
                        series: [{
                            name: "理发师销售额",
                            type: 'column',
                            colorByPoint: true,
                            data: t,
                        }]
                    });


                }
            })
        }
        if (choice == 2) {
            $.ajax({
                url: "/order/sumByService",
                type: "post",
                data: $("#category-form").serialize(),
                success: function (data) {
                    //如果没有数据
                    if (data.length == 0) {

                        chart.update({
                            title: {
                                text: ""
                            },
                            subtitle: {
                                text: ""
                            },
                            series: {
                                data: data,

                            },
                            noData: {
                                style: {
                                    fontWeight: 'bold',
                                    fontSize: '15px',
                                    color: '#303030'
                                }
                            },

                        });
                        return;
                    }
                    var t = [];
                    var star = data[0].ScreateTime;
                    var end = data[0].FcreateTime;
                    if (star != "" && star != null)
                        star += "—";
                    if (star == null) {
                        star = "";
                        end = end + "以前"
                    }
                    if (end == null) {
                        star += "今天"
                        end = "";
                    }


                    //将数据组装成[{,,,}]的形式才能被hcharts识别
                    for (var i = 0; i < data.length; i++) {
                        var v = {};
                        v.y = data[i].total;
                        v.name = data[i].category;
                        t.push(v)
                    }
                    chart.update({
                        chart: {
                            line: false,
                            column: true,
                        },
                        title: {
                            text: '服务销售额'
                        },
                        subtitle: {
                            text: star + '—' + end + '区间查询'
                        },

                        series: [{
                            name: "服务销售额",
                            type: 'column',
                            colorByPoint: true,
                            data: t,
                        }]
                    });


                }
            })

        }
        if (choice == 3) {
            $.ajax({
                url: "/order/sumByTos",
                type: "post",
                data: $("#category-form").serialize(),
                success: function (data) {
                    //如果没有数据
                    if (data.length == 0) {

                        chart.update({
                            title: {
                                text: ''
                            },
                            subtitle: {
                                text: ''
                            },
                            series: {
                                data: data,

                            },
                            noData: {
                                style: {
                                    fontWeight: 'bold',
                                    fontSize: '20px',
                                    color: '#303030'
                                }
                            },

                        });
                        return;
                    }
                    var t = [];
                    var star = data[0].ScreateTime;
                    var end = data[0].FcreateTime;
                    if (star != "" && star != null)
                        star += "—";
                    if (star == null) {
                        star = "";
                        end = end + "以前"
                    }
                    if (end == null) {
                        star += "今天"
                        end = "";
                    }

                    //将数据组装成[{,,,}]的形式才能被hcharts识别
                    for (var i = 0; i < data.length; i++) {
                        var v = {};
                        v.y = data[i].total;
                        v.name = data[i].category;
                        t.push(v)
                    }
                    chart.update({
                        chart: {
                            line: false,
                            column: false,
                        },
                        title: {
                            text: '服务类型销售额'
                        },
                        subtitle: {
                            text: star + '—' + end + '区间查询'
                        },
                        plotOptions: {
                            series: {
                                borderWidth: 0,
                                dataLabels: {
                                    enabled: true,
                                    format: '<span style="color:{point.color}">{point.name}:{point.y:.2f}元'
                                }
                            }
                        },
                        series: [{
                            name: "服务类型销售额",
                            type: 'pie',
                            colorByPoint: true,
                            data: t,
                        }]
                    });


                }
            })

        }

    })
</script>
</body>
</html>